<!--
  speedy-vision.js
  GPU-accelerated Computer Vision for JavaScript
  Copyright 2020-2024 Alexandre Martins <alemartf(at)gmail.com>

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at
  
      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.

  orb-features.html
  ORB features demo
-->
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="speedy-vision.js: GPU-accelerated Computer Vision for JavaScript">
        <meta name="author" content="Alexandre Martins">
        <title>ORB features</title>
        <link href="demo-base.css" rel="stylesheet">
        <script src="demo-base.js"></script>
        <script src="../dist/speedy-vision.js"></script>
    </head>
    <body>
        <h1>ORB features</h1>
        <form autocomplete="off">
            <div>
                <label for="detection-method">Detector</label>
                <select id="detection-method">
                    <option value="fast" selected>FAST</option>
                    <option value="harris">Harris</option>
                </select>
            </div>
            <div>&nbsp;
                <label for="max-features">Clipping</label>
                <select id="max-features">
                    <option value="100">100</option>
                    <option value="200">200</option>
                    <option value="300">300</option>
                    <option value="500">500</option>
                    <option value="800" selected>800</option>
                    <option value="1200">1200</option>
                    <option value="2000">2000</option>
                </select>
            </div>
            <div class="separator"></div>
            <div>
                <label for="sensitivity">Sensitivity</label>
                <input type="range" min="0.0" max="0.90" value="0.50" step="0.01" id="sensitivity">
            </div>
            <div>
                <label for="speed-slider">Video speed</label>
                <input type="range" id="speed-slider" min="0.10" max="2" value="1" step="0.01">
            </div>
        </form>
        <div>
            <span id="status"></span>
            <canvas id="canvas-demo"></canvas>
        </div>
        <div>
            <button id="play">Play / pause</button>
        </div>
        <video id="video"
            poster="../assets/loading.jpg"
            width="640" height="360"
            loop muted autoplay playsinline hidden
            title="Free video by Ricardo Esquivel (pexels.com)">
                <source src="../assets/corridor.webm" type="video/webm" />
                <source src="../assets/corridor.mp4" type="video/mp4" />
        </video>
        <script>
window.onload = async function()
{
    /*

    This is our pipeline:

    Image  ---> Convert to ---> Image ------> Keypoint -----> Keypoint ---> ORB ----------> Keypoint
    Source      greyscale       Pyramid       detector        Clipper       descriptors     Sink
                |                                                            ^
                |                                                            |
                +-------------------------> Gaussian ------------------------+
                                            Blur

    The Keypoint detector is either FAST or Harris

    */

    // form elements
    const detectionMethod = document.getElementById('detection-method');
    const sensitivity = document.getElementById('sensitivity');
    const maxFeatures = document.getElementById('max-features');
    const playButton = document.getElementById('play');
    const speedSlider = document.getElementById('speed-slider');

    // load the video
    const video = document.getElementById('video');
    const media = await Speedy.load(video);

    // create the pipelines
    function createPipelineWith(detector)
    {
        const pipeline = Speedy.Pipeline();
        const source = Speedy.Image.Source();
        const greyscale = Speedy.Filter.Greyscale();
        const pyramid = Speedy.Image.Pyramid();
        const blur = Speedy.Filter.GaussianBlur(); // reduce noise before computing the descriptors
        const clipper = Speedy.Keypoint.Clipper('clipper');
        const descriptor = Speedy.Keypoint.Descriptor.ORB();
        const sink = Speedy.Keypoint.Sink();

        source.media = media;
        blur.kernelSize = Speedy.Size(9, 9);
        blur.sigma = Speedy.Vector2(2, 2);
        detector.levels = 8; // pyramid levels
        detector.scaleFactor = 1.19; // approx. 2^0.25
        detector.capacity = 8192;
        clipper.size = 800; // up to how many features?
        sink.turbo = true;

        source.output().connectTo(greyscale.input());

        greyscale.output().connectTo(pyramid.input());
        pyramid.output().connectTo(detector.input());
        detector.output().connectTo(clipper.input());
        clipper.output().connectTo(descriptor.input('keypoints'));

        greyscale.output().connectTo(blur.input());
        blur.output().connectTo(descriptor.input('image'));

        descriptor.output().connectTo(sink.input());

        pipeline.init(source, greyscale, pyramid, blur, detector, clipper, descriptor, sink);

        return pipeline;
    }

    const fast = Speedy.Keypoint.Detector.FAST();
    const harris = Speedy.Keypoint.Detector.Harris();
    const pipelines = {
        fast: createPipelineWith(fast),
        harris: createPipelineWith(harris)
    };

    // Main loop
    (function() {
        const canvas = setupCanvas('canvas-demo', media.width, media.height, video.title);
        let keypoints = [], frameReady = false;

        async function update()
        {
            // pick a pipeline
            const pipeline = pipelines[detectionMethod.value];
            const clipper = pipeline.node('clipper');

            // adjust the sensitivity and the clipper
            fast.threshold = 255 * (1.0 - Number(sensitivity.value));
            harris.quality = 1.0 - Number(sensitivity.value);
            clipper.size = Number(maxFeatures.value);

            // find the features
            const result = await pipeline.run();
            keypoints = result.keypoints;

            // repeat
            frameReady = true;
            setTimeout(update, 1000 / 60);
        }
        update();

        function render()
        {
            if(frameReady) {
                renderMedia(media, canvas);
                renderKeypoints(canvas, keypoints, '#0fa', 2, 2);
            }

            frameReady = false;
            requestAnimationFrame(render);
        }
        render();

        setInterval(() => renderStatus(keypoints), 200);
    })();

    // misc
    playButton.onclick = () => video.paused ? video.play() : video.pause();
    speedSlider.oninput = () => video.playbackRate = speedSlider.value;
}
        </script>
        <section id="speedy-vision">
            <span>Powered by <a href="https://github.com/alemart/speedy-vision" target="_blank">speedy-vision.js</a></span>
            <a href="https://github.com/sponsors/alemart" target="_blank" class="button">
                <img alt="GitHub Sponsors" src="https://img.shields.io/github/sponsors/alemart?style=for-the-badge&logo=github&label=Sponsor&labelColor=royalblue&color=gold">
            </a>
        </section>
    </body>
</html>